<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/index">首页></router-link>
                        </li>
                        <li class="color666 f_left">在线报名</li>
                    </ul>
                </div>
                <div class="border_content text_center" v-if="stepIndex==0">
                    <img src="../../../static/img/title1.png" width="1150px" height="60px">
                    <h3 class="apply_title">二级建造师继续教育报名</h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="apply_form" ref="form" :rule="form" label-width="90px">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project">
                            <el-input v-model.trim="pruduct.typeName" readonly @focus="dialogVisible = true"></el-input>
                            <a type="button" class="select_class" @click="dialogVisible = true">选择专业</a>
                        </el-form-item>
                        <el-form-item label="课时：" class="choose_project text_left">
                            <span>{{pruduct.period}}课时</span>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model.trim="invoiceTitle" readonly @focus="invoiceFunc"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>
                        <el-form-item class="apply_btns">
                            <router-link class="apply_return" to="/index">返回</router-link>
                            <a @click="onSubmit()">确认提交</a>
                        </el-form-item>
                    </el-form>
                    <!-- 选择专业弹框 -->
                    <classDialog :isShow="dialogVisible" :type="projectCode" @closeDialogFather="getSonCancel"
                        @sureDialogFather="getSonSure"></classDialog>
                </div>
                <div class="border_content text_center" v-if="stepIndex==1">
                    <img src="../../../static/img/title2.png" width="1150px" height="60px">
                    <!-- <h3 class="confirm_title">{{pruduct.typeName}}  信息确认</h3> -->

                    <h3 class="apply_title">二级建造师继续教育报名</h3>
                    <h4 class="apply_title_explain">请确认您的报名信息</h4>
                    <el-form class="apply_form" ref="form" :rule="form" label-width="120px">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="报考专业：">
                            <p class="apply_p">{{pruduct.typeName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="课时：">
                            <p class="apply_p">{{pruduct.period}}课时</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">{{pruduct.productPrice}}元</p>
                        </el-form-item>
                        <el-form-item label="发票抬头：" class="choose_project text_left">
                            <p class="apply_p">{{invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="choose_project text_left">
                            <p v-if="pruduct.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="pruduct.invoiceType==2" class="apply_p">专票</p>
                            <p v-if="pruduct.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns confirm_btns" style="margin: 30px 0;">
                            <p style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="prevStep">上一步</a>
                            <a @click="confirmPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 报名后未付款弹框 -->
            <apply-nopay :nopayData="{currentApply:currentApply,type:1}"></apply-nopay>
            <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../components/header_and_footer.vue'
    import classDialog from '../../components/class_dialog.vue'
    import applyNopay from '../../components/apply_nopay.vue'
    import ticketDialog from '@/components/invoice_lists.vue'
    export default {
        name: "online_apply",
        data: function() {
            return {
                stepIndex: 0, //是否显示选择专业弹框
                dialogNoPay: false,
                form: {
                    identity: "",
                    userName: ""
                },
                projectCode: this.$route.params.type,
                dialogVisible: false, //选择专业
                currentApply: undefined,
                pruduct: {
                    type: 0,
                    period: 0,
                    productPrice: "",
                    productId: "",
                    typeName: '',
                    invoiceType: 0,
                    invoiceTempId: "",
                },
                invoiceTitle: "",
            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                that.form.userName = info.realName;
                that.form.identity = info.identityCode;
                if (info.currentApply != undefined) {
                    that.currentApply = info.currentApply;
                    return ;
                }
                if(info.currentFaceApply != undefined){
                    that.currentApply = info.currentFaceApply;
                }
            });
        },
        methods: {
            // 报名提交
            onSubmit: function() {
                var that = this;
                if (that.pruduct.typeName == "") {
                    this.$message.error('请选择专业！');
                    return;
                }
            if (String.isEmptyOrNUll(this.pruduct.invoiceTempId)) {
                this.$message.error('请选择发票！');
                return;
            }
                this.stepIndex = 1;
            },
            handleChange: function(value) {
                this.pruduct.doubleNum = value;
            },
            invoiceFunc: function() {
                this.invoiceTitle="";
                this.pruduct.invoiceTempId="";
            	this.$refs.invoiceChild.getInvoiceTemp();
            },
            invoiceBtn: function(data) {
            	this.invoiceTitle = data.invoiceTitle;
            	this.pruduct.invoiceType = data.invoiceType;
            	this.pruduct.invoiceTempId = data.invoiceTempId;
            },
            //上一步
            prevStep: function() {
                this.stepIndex = 0;
            },
            //去付款
            confirmPay: function() {
                var that = this;
                if (that.pruduct.typeName == "") {
                    this.$message.error('请选择专业！');
                    return;
                }
                if (that.pruduct.invoiceTempId == "") {
                    this.$message.error('请选择发票！');
                    return;
                }
                this.common.post(this.api.launchApplyTrade, this.pruduct, function(data) {
                    that.common.toPage("/apply/zhifubao/" + data.resultMap);
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });
            },
            getSonCancel: function(val) {
                this.dialogVisible = val;
            },
            getSonSure: function(data) {
                this.pruduct.typeName = data.typeName;
                this.pruduct.productId = data.id;
                this.dialogVisible = false;
                this.pruduct.period = data.ext.period;
                this.pruduct.productPrice = data.ext.productPrice;
            },
            applyGoOn: function(tradeNo) {
                var url = String.Format('/apply/flow_order/{0}', tradeNo);
                this.common.toPage(url);
            }
        },
        components: {
            headerFooter,
            classDialog,
            applyNopay,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
    }

    .el-checkbox {
        margin-right: 0;
    }
</style>
